<template>
    <div>
        <mt-header class="m_mint_header" title="密码修改">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="m_change_password">
            <mt-field label="输入原密码" placeholder="请输入" type="password" :state="formStatus.oldPwd"
                      v-model="formPassword.oldPwd"></mt-field>
            <mt-field label="输入新密码" placeholder="请输入" type="password" :state="formStatus.pwd"
                      v-model="formPassword.pwd"></mt-field>
            <mt-field label="确认新密码" placeholder="请输入" type="password" :state="formStatus.confirmPwd"
                      v-model="formPassword.confirmPwd"></mt-field>

        </div>
        <div class="m_change_password_btn">
            <mt-button size="large" type="primary" @click.native="requestChangePassWord">确认修改</mt-button>
        </div>

    </div>
</template>

<script>

    import {MessageBox} from 'mint-ui'

    export default {
        name: "Password",
        data() {
            return {
                formPassword: {
                    oldPwd: '',
                    pwd: '',
                    confirmPwd: '',
                },
                formStatus: {
                    oldPwd: '',
                    pwd: '',
                    confirmPwd: '',
                }
            }
        },
        methods: {
            requestChangePassWord() {
                if (this.formPassword.oldPwd == "") {
                    this.formStatus.oldPwd = 'warning';
                    this.$toast("原密码不能为空");
                    return false;
                } else if (!passwordReg.test(this.formPassword.pwd)) {
                    this.formStatus.oldPwd = 'success';
                    this.formStatus.pwd = 'error';
                    this.$toast({message: "密码长度要大于6位，由数字和字母组成", duration: 1000});
                    return false;
                } else if (this.formPassword.confirmPwd == "") {
                    this.formStatus.oldPwd = 'success';
                    this.formStatus.pwd = 'success';
                    this.formStatus.confirmPwd = 'warning';
                    this.$toast({message: "确认密码不能为空", duration: 1000});
                    return false;
                } else if (this.formPassword.pwd != this.formPassword.confirmPwd) {
                    this.formStatus.oldPwd = 'success';
                    this.formStatus.pwd = 'success';
                    this.formStatus.confirmPwd = 'error';
                    this.$toast({message: "两次密码不相同", duration: 1000});
                    return false;
                } else {
                    let params = {
                        oldPwd: this.$md5(this.formPassword.oldPwd),
                        pwd: this.$md5(this.formPassword.pwd),
                    };
                    this.requestAxios.requestWeb('post', '/api/set_pwd.do', params, (response) => {
                        MessageBox.alert('密码修改成功，请重新登录').then(() => {
                            this.$router.push('/m/login')
                        })
                    })
                }
            }
        }
    }
</script>

<style>

    .m_mint_header{
        height: 1rem !important;
        align-items: center !important;
        color: #fff!important;
        background: linear-gradient(#fea425, #dc5405);
    }

    .m_mint_header .mint-header-title {
        color: #fff!important;
        margin-top: 0!important;
        font-size: .3rem!important;
        font-weight: bold!important;
    }

    .m_change_password{
        margin: .3rem 0;
        border-top:1px solid #eee;
    }

    .m_change_password .mint-cell-wrapper{
        border-bottom:1px solid #eee;
    }



    .m_change_password_btn{
        padding:0 .3rem;
        margin-top: 3rem;
    }

    .m_change_password_btn .mint-button{
        padding:0 .3rem;
        margin-top: 3rem;
        background: linear-gradient(#fda749,#cd5000);
        height: .65rem;
        border-radius: .2rem;
        font-size: .3rem;
    }

</style>
